<template>
	<view class="content">
    <u-sticky bgColor="#fff" offset-top="36" class="stickyEl">
      <u-tabs :list="tabsData" @click="click"></u-tabs>
    </u-sticky>
    <view class="add-box" @click="toQuestion">
      <u-icon class="add-icon" size="50" name="close-circle" color="rgb(62, 95, 216)" bold></u-icon>
      <text class="add-box-text">我也去问问...</text>
    </view>
    <QuestionCard />
    <u-button text="月落"></u-button>
    <u-button type="primary" text="镂空"></u-button>
	</view>
</template>

<script>
import QuestionCard from '../../components/questionCard/index.vue';
export default {
  components: {
    QuestionCard,
  },
  data() {
    return {
      title: 'Hello',
      titleHeight: uni.getSystemInfoSync().statusBarHeight,
      tabsData: [
        {
          name: '公司',
        },
        {
          name: '个人',
        },
      ]
    }
  },
  onLoad() {
    console.log('--------1111------', uni.getSystemInfoSync().statusBarHeight)
  },
  methods: {
    click(item) {
      console.log('---------', item);
    },
    toQuestion() {
      console.log('------navigateTo---', uni.navigateTo);
      uni.navigateTo({
        url: '/pages/question/index',
        fail: (e) => {
          console.log('-------navigateTo----fail---', e);
        }
      });
    }
  }
}
</script>

<style lang="scss">
	.content {
    margin: 0 auto;
    max-width: 900rpx;
	}

  .stickyEl {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: -4rpx;
    // color: rgb(62, 95, 216);
  }

  .add-box {
    display: flex;
    align-items: center;
    margin: 20rpx;
    border: 2rpx solid rgb(218, 218, 218);
    border-radius: 16rpx;
    padding: 20rpx;
    .add-icon {
      transform: rotateZ(45deg);
      margin-right: 20rpx;
    }
    .add-box-text {
      color: #999;
    }
  }

</style>
